:host {
  padding: 6px;
  overflow: hidden;
  .flow-container {
    margin: 1rem;
    padding: 0.5rem;
  }
}


.vertical {
  .scrollable-content {
    max-width: initial !important;
  }
}

.VS-Container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  overflow: visible scroll !important;
}

.hidescroll {

  &::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: transparent;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px;
    box-shadow: inset 7px 10px 12px transparent;
  }
}


.flow-grid-lines {
  display: flex;
  justify-content: space-between;
  margin: 0px 60px;
  position: absolute;
  top: 0;
  z-index: 0;
  left: 0px;
  bottom: -1px;
  right: 0px;

  // transition: all 0.3s ease;
  .line {
    margin-right: -1px;
    border: 0px dotted rgb(204, 204, 204);
    border-right-width: 1px;
    border-left-width: 1px;
    min-width: 149px;
    // transition: all 0.3s ease;
    flex: 1;
  }
}

.hosts {
  position: absolute;
  top: 0px;
  display: inline-block;
  // justify-content: space-between;
  z-index: 1;
  padding: 6px 0;
  margin: 0 6px;
  min-width: calc(100% - 12px);

  .hosts-wrapper {
    display: flex;
    justify-content: space-between;

    .item-wrapper {
      // min-width: 130px;
      height: 1px;

      &.big {
        // min-width: 148px;
      }

      &.hidden {
        display: none;
      }

      &:last-child {
        min-width: 0px;
      }

      .item {
        position: relative;
        display: inline-block;
        margin-top: 0.3rem 0;
        background-color: white;
        color: grey;
        font-size: 12px;
        border: 1px dotted lightgray;
        border-radius: 6px;
        max-width: 105px;
        min-width: 105px;

        .ipfield {
          text-align: center;
          background: #fafafa;
          color: #828282;
          padding: 3px 6px;
          border-radius: 0px 0px 6px 6px;
          border-top: 1px solid #ececec;

          &.multiple {
            display: none;
            // display: block;
          }

          &.dotted {
            display: block;
            // display: none;

            >span {
              font-size: 12pt;
              line-height: 0;
            }
          }
        }

        &:hover .ipfield {
          &.multiple {
            display: block;
          }

          &.dotted {
            display: none;
          }
        }

        .aliasfield {
          display: flex;
          flex-direction: column;
          font-size: 12px;
          justify-content: center;
          color: rgb(102, 102, 102);
          border-radius: 6px 6px 0px 0px;
          padding: 3px 3px;
          text-align: center;
          max-width: 105px;
          min-height: 58px;
        }

        .aliasimg {
          margin-left: -3px;
        }

        .alias-name {
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-weight: 500;
          font-family: 'Roboto';
        }

        .defaultaliasimg {
          margin-left: -3px;
          opacity: .35;
          height: 20px;
          padding: 7.5px;
          height: 35px;
        }
      }
    }
  }
}

.flowscreen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: calc(100%);
}

.virtual-scrollbar {
  position: absolute;
  // background: aqua;
  width: 22px;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  z-index: 999;
}

.label-callid-container {
  background-color: hsla(0, 0%, 97%, 0.856);
  backdrop-filter: blur(1px);
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  line-height: 7px;
  bottom: 0px;
  text-align: center;
  font-size: 12px;
  overflow-y: visible;
  -ms-overflow-style: none;
  scrollbar-width: none;
  transition: max-height 0.5s;

  /* Firefox */
  &::-webkit-scrollbar {
    display: none;
  }


  // .label-callid-wrapper {
  //     border: 1px solid black;
  //     background-color: rgba(0, 0, 0, 0.3);
  //     display: inline-block;
  //     padding: 5px;
  //     border-radius: 4px;
  //     user-select: none;
  // }
  .label-callid-wrapper {
    background-color: hsla(0, 0%, 100%, 0.7);
    border: 1px solid;
    margin: 1px;
    display: inline-block;
    padding: 5px;
    border-radius: 3px;
  }

  &.hidden {
    max-height: 0px;
  }
}

.label-callid-pull {
  position: absolute;
  left: calc(50% - 25px);
  height: 20px;
  width: 50px;
  background-color: hsla(0, 0%, 85%, 1);
  border-radius: 3px 3px 0 0;
  transition: bottom 1s;
  cursor: pointer;
}

.selected {
  transition: .3s all;
  background: hsl(162, 73%, 46%) !important;
  color: white !important;
  border: 1px solid white;
  border-radius: 3px;

}

.flowline {
  padding-top: 6px
}
